
// 定义一个空数组 
let cArr = [];

// 分类的添加功能  

$('#btnAdd').on('click',function() {
    let title = $('[name="title"]').val().trim();
    let className = $('[name="className"]').val().trim();
    if(title.length == 0) return  alert("请填写分类的名称");
    if(className.length == 0) return  alert("请填写类名");

    // 发送ajax 
    $.ajax({
        type:"post",
        url:"/categories",
        data:{
            title:title,
            className:className
        },
        success:function(res) {
            // 把这个对象 添加到push数组中 
            cArr.push(res);
            render();

            $('[name="title"]').val('');
            $('[name="className"]').val('');


        }
    })
});

// 定义render方法 

function render() {
    let html = template('cTpl',{data:cArr});
    $('tbody').html(html);
}


// 发送ajax获取所有的分类

$.ajax({
    type:'get',
    url:"/categories",
    success:function(res) {
        cArr = res;
        render();
    }
})

// 编辑功能 
var id;
$('tbody').on('click','.edit',function(){
    id = $(this).parent().attr("data-id");
    $('h2').text("编辑分类");
    let tr = $(this).parents('tr');
    $('[name="title"]').val(tr.children().eq(1).text());
    $('[name="className"]').val(tr.children().eq(2).text());

    $('#btnAdd').hide();
    $('#btnEdit').show();
});

$('#btnEdit').on('click',function() {
    // 发送ajax 
    $.ajax({
        type:'put',
        url:'/categories/' + id,
        data:{
            title:$('[name="title"]').val().trim(),
            className:$('[name="className"]').val().trim(),
        },
        success:function(res) {
            let index = cArr.findIndex(item=>item._id == res._id);
            cArr[index] = res;
            render();

            $('h2').text("添加分类");

            $('[name="title"]').val('');
            $('[name="className"]').val('');
        
            $('#btnAdd').show();
            $('#btnEdit').hide();
        }
    })
})


// 删除单个用户
$('tbody').on('click','.del',function(){
    let id = $(this).parent().attr('data-id');
    if(confirm("你真的要删除吗?")){
        $.ajax({
            type:"delete",
            url:'/categories/' + id,
            success:function(res) {
                let index = cArr.findIndex(item=>item._id == res._id);
                cArr.splice(index,1);
                render();
            }
        })
    }
});

// 全选功能 
$('thead input').on('click', function () {
    $('tbody input').prop('checked', $(this).prop('checked'));

    if ($(this).prop("checked")) {
        $('#allDel').show();
    } else {
        $('#allDel').hide();
    }
});

// 如果下面的复选框都打上勾了 上面的这个复选框也要跟着打勾 

$('tbody').on('click', '.check', function () {
    // 判断下面复选框的个数是否等于 被选中元素的个数  
    let length = $('.check').length;
    let checklength = $('.check:checked').length;
    // 上面复选框是否选中 如果选中的个数与下面复选框的个数相等的话 
    $('thead input').prop('checked', length === checklength);

    // 如果下面的复选框的选中个数大于1 就需要显示出来 
    if (checklength > 1) {
        $('#allDel').show();
    } else {
        $('#allDel').hide();
    }
})


$('#allDel').on('click',function(){
    let arr = [];
    $('.check:checked').each(function(index,item){
        arr.push($(this).parents('tr').children().eq(3).attr("data-id"));
    })

    if(confirm("你真的要删除吗?")){
        $.ajax({
            type:"delete",
            url:'/categories/' + arr.join('-'),
            success:function(res) {
                res.forEach(item=>{
                    let index = cArr.findIndex(ele=>ele._id === item._id);
                    cArr.splice(index,1);
                    render();
                })
            }
        })
    }
    
})